<template>
  <div class="list" ref="list">
   <div class="content">
    <div class="area">
      <div class="title">当前城市</div>
      <div class="button-list">
        <div class="button-warpper">
          <div class="button">{{this.city}}</div>
        </div>
      </div>
    </div>
   <div class="area">
      <div class="title">热门城市</div>
      <div class="button-list">
        <div class="button-warpper" v-for="item in hotCities" :key="item.id" @click="handleCityClick(item.name)">
          <div class="button">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="area"  v-for="(item,key) in cities" :ref="key" :key="key">
      <div class="title">{{key}}</div>
      <div class="item-list">
        <div class="item"  @click="handleCityClick(cityItem.name)" v-for="cityItem in item" :key="cityItem.id">{{cityItem.name}}</div>
      </div>
    </div>
   </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ListCity',
  props: {
    hotCities: {
      type: Array,
      default: () => {
        return []
      }
    },
    cities: {
      type: Object,
      default: () => {}
    },
    letter: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      bscroll: null
    }
  },
  computed: {
    ...mapState(['city'])
  },
  mounted () {
    this.initBscroll()
  },
  watch: {
    letter () {
      if (this.letter) {
        // 获取页面的字母位置
        const element = this.$refs[this.letter][0]
        this.bscroll.scrollToElement(element)
      }
    }
  },
  methods: {
    initBscroll () {
      this.bscroll = new BScroll(this.$refs.list, {
        click: true
      })
    },
    handleCityClick (city) {
      this.changeCity(city)
      this.$router.push('/home')
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
   .list
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    overflow hidden
    .title
     line-height .54rem
     background-color #eee
     padding-left .2rem
     border-bottom 0.01rem solid #ccc
     border-top 0.01rem solid #ccc
     color #666
     font-size .26rem
    .button-list
     padding .1rem .6rem .1rem .1rem
     overflow hidden
     .button-warpper
      width 33.33%
      float left
      .button
       text-align center
       margin .1rem
       border 0.02rem solid $bgColor
       color $bgColor
       padding 0.1rem 0
       border-radius 0.06rem
    .item-list
     .item
      line-height .76rem
      border-bottom 0.01rem solid #ccc
      border-top 0.01rem solid #ccc
      padding-left .2rem
</style>
